<template>
	<div class="public_content study_content bg-color-gray9">
		<!-- 更多新闻列表-->
		<div class="public_content_right_l pull-left over-h study_topic">
			<div class="public_card">
				<div class="public_card_title bg-img-card fcolor-white">
					<span class="fsize-18 pl-15">{{title}}</span>
				</div>
				<div class="study_topic_content mt-15">
					<ul class="members-list" v-if="dataList.length > 0">
						<li v-for="(item,index) in dataList" :key="item.id">
							<router-link v-if="title == '党员风采'" key="partyMienDetail" :to="{path: `/partyMien-detail/${item.id}`}">
								<span v-html="item.title"></span>  
							</router-link>
							<router-link v-else key="newsDetail" :to="{path: `/news-detail/${item.id}`}">
								<span v-html="item.title"></span>  
							</router-link>
							<i class="members-list-date">{{item.createTime}}</i>
						</li>
					</ul>
				</div>
				<!-- 分页 -->
				<div class="page-bar">
					<ul>
						<li v-if="cur>1"><a @click="cur--,pageClick()">上一页</a></li>
						<li v-if="cur==1"><a class="banclick">上一页</a></li>
						<li v-for="index in indexs" :class="{ 'active': cur == index}">
							<a @click="btnClick(index)">{{ index }}</a>
						</li>
						<li v-if="cur!=all"><a @click="cur++,pageClick()">下一页</a></li>
						<li v-if="cur == all"><a class="banclick">下一页</a></li>
						<li><a>共<i>{{all}}</i>页 /<i>{{totalCount}}</i>条</a></li>
					</ul>
				</div>
			</div>
		</div>
		<!--新闻快讯-->
		<div class="threeitems public_content_right_r pull-right w-320 over-h">
			<div class="public_card_title bg-img-card fcolor-white">
				<span class="fsize-16 pl-15">新闻快讯</span>
			</div>
			<ul class="public_card_content over-h mt-10" v-if="newsList.length > 0">
				<li class="mt-10 text-l" v-for="(item,index) in newsList" :key="item.id">
					<router-link :to="{path: `/news-detail/${item.id}`}" class="see-details">
						<span v-html="item.title"></span>  
					</router-link>
				</li>	
			</ul>
		</div>		
	</div>
</template>

<script>
	import '@/assets/css/common.css';
	import '@/assets/css/page.css';
	export default {
		data() {
			return {
				id:'',
				title:"",
				dataList:[],
				newsList:[],
				page:1,
				limit:10,
				totalCount:0,
				all: 1, //总页数
				cur: 1//当前页码
			}
		},
		watch: {
			cur: function(oldValue , newValue){
				console.log(arguments);
			}
		}, 
		computed: {
			indexs: function(){
				var left = 1;
				var right = this.all;
				var ar = [];
				if(this.all>= 5){
					if(this.cur > 3 && this.cur < this.all-2){
						left = this.cur - 2
						right = this.cur + 2
					}else{
						if(this.cur<=3){
							left = 1
							right = 5
						}else{
							right = this.all
							left = this.all -4
						}
					}
				}
				while (left <= right){
					ar.push(left)
					left ++
				}
				return ar
			}
		},
		mounted() {
			this.init();
		},
		methods: {
			init(){
				this.id = this.$route.params.id;
				this.$parent.$data.current = 1
				this.getDataList();
				this.getNewsList();
			},
			getDataList(){
				this.$axios.get(`web/article/getArticleListByCategoryId`,
					{'categoryId':this.id,'page':this.page,'limit':this.limit}).then(res => {
					if(res.data && res.data.code === 0){
						this.title = res.data.category.name;
						this.totalCount = res.data.page.totalCount;
						this.all = res.data.page.totalPage;
						this.dataList = res.data.page.list;
					}else {
						this.$message.error(res.data.msg);
					}
				})
			},
			//获取右侧新闻
			getNewsList(){
				this.$axios.get(`web/article/articleList`).then(res => {
					if(res.data && res.data.code === 0){
						res.data.data.map((item)=>{
							if(item.id == '053551262afe4085b04c2f8d9ce06d60'){
								this.newsList = item.articleEntity.slice(0,10);  
							}
						})
					}else {
						this.$message.error(res.data.msg);
					}
				})
			},
			btnClick(data){//页码点击事件
				if(data != this.cur){
					console.log('现在在'+data+'页');
					this.cur = data;
					this.page = data;
					this.getDataList();
				}
			},
			pageClick(){
				console.log('现在在'+this.cur+'页');
				this.page = this.cur;
				this.getDataList();
			}
		}
	}
</script>

<style scoped>
	.study_topic_content{
		width:820px;
	}
	.members-list{
	margin: 15px 30px;
    border-bottom: #f6f6f6 1px solid;
    padding-bottom: 15px;
}
.members-list li{
	overflow: hidden;
	line-height: 220%;
	padding-left: 15px;
	background:url(~@/assets/img/icon.gif) 0 16px no-repeat;
    font-size: 16px;
}
.members-list li a{
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
	float: left;
    width: 625px;
    text-align: left;
	color: #333;
}
.members-list-date{
	font-style: normal;
	font-size:14px;
	color: #666;
}
/* 新闻快讯 */
ul.public_card_content, ol.public_card_content{
    padding-left: 22px;
}
ol.public_card_content > li{
    display: list-item;
    list-style: decimal;
    width: 100%;
    vertical-align: top;
}
ul.public_card_content, ul.public_card_content > li{
    list-style: disc;
    color: #d9d9d9;
}
.public_card_content > li{
    font-size: 14px;
}
.public_card_content a{
    color: #333;
    display: inline-block;
    width: 100%;
    vertical-align: top;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

}
.public_card_content li{
    counter-increment: chapter;
}
.public_card_content a:before{
}
.public_card_content li:hover > a{
    color: #ff3032;
}
.threeitems .public_card_content li:first-child, .threeitems .public_card_content li:nth-of-type(2),
.threeitems .public_card_content li:nth-of-type(3){
    list-style: none;
    position: relative;
}
.threeitems .public_card_content li:first-child a:before,
.threeitems .public_card_content li:nth-of-type(2) a:before,
.threeitems .public_card_content li:nth-of-type(3) a:before{
    content: counter(chapter);
    height: 16px;
    width: 16px;
    display: block;
    position: absolute;
    top: 2px;
    left: -22px;
    z-index: 1;
    font-size: 12px;
    line-height: 15px;
    /*background: #6ccddf;*/
    border-radius: 40px;
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    color: #fff;
    text-align: center;
}
.threeitems .public_card_content li:first-child a:after,
.threeitems .public_card_content li:nth-of-type(2) a:after,
.threeitems .public_card_content li:nth-of-type(3) a:after {
    content: "";
    height: 0;
    width: 0;
    border-style: solid;
    border-width: 4px 4px 4px 5px;
    /*border-color: transparent transparent transparent #6ccddf;*/
    display: block;
    position: absolute;
    top: 6px;
    left: -8px;
}
.threeitems .public_card_content li:first-child a:before{
    background: #ff3032;
}
.threeitems .public_card_content li:nth-of-type(2) a:before{
    background: #ff9776;
}
.threeitems .public_card_content li:nth-of-type(3) a:before{
    background: #ffba66;
}
.threeitems .public_card_content li:first-child a:after{
    border-color: transparent transparent transparent #ff3032;
}
.threeitems .public_card_content li:nth-of-type(2) a:after{
    border-color: transparent transparent transparent #ff9776;
}
.threeitems .public_card_content li:nth-of-type(3) a:after{
    border-color: transparent transparent transparent #ffba66;
}
</style>